import { Menu } from 'antd';
import type { FC, ReactNode } from 'react';
import classNames from 'classnames';
import './style.less';

export interface DropdownItemProps {
  /** 下拉菜单项的内容 */
  title?: ReactNode;
  /** 点击事件 */
  onClick?: (e: React.MouseEvent<HTMLAnchorElement | HTMLSpanElement>) => void;
  /** 自定义图标 */
  icon?: ReactNode;
  /** 自定义类名 */
  className?: string;
  /** 自定义样式 */
  style?: React.CSSProperties;
}

const DropdownItem: FC<DropdownItemProps> = ({
  title,
  onClick,
  icon,
  className,
  style,
}) => {
  const classes = classNames('xwd-dropdown-item', className);

  const content = (
    <>
      {icon && <span className="xwd-dropdown-item-icon">{icon}</span>}
      <span className="xwd-dropdown-item-text">{title}</span>
    </>
  );

  return (
    <Menu.Item className={classes} style={style} onClick={onClick}>
      {content}
    </Menu.Item>
  );
};

export default DropdownItem; 